<template>
	<yd-layout id='storeOrder' class=''>
		<div class="header_f" @click="goStoreAddr">
			<div v-if="!address_id" class="header">
				<img src="../../assets/storeOrder_1.png" class="header_img" alt="" />
				<div class="header_add">请添加收货地址</div>
			</div>
			<div v-else class="header_addr">
				<img class="header_addr_img" src="../../assets/storeOrder_2.png" alt="" />
				<div class="header_addr_right">
					<div class="header_addr_people">
						<label>{{addrObj.reciver_name}}</label>
						<span>{{addrObj.mobile}}</span>
					</div>
					<div class="header_addr_addr">{{addrObj.province}}{{addrObj.city}}{{addrObj.area}}{{addrObj.address}}</div>
				</div>
				<img src="../../assets/storeOrder_3.png" class="header_addr_icon" alt="" />
			</div>
		</div>
		<div class="content">
			<div class="goods_list_f">
				<div class="goods_list" v-for="item in orderList">
					<img :src="item.title_img" alt="" class="goods_img" />
					<div class="goods_list_right">
						<div class="goods_name c_text_ellipsis_2">{{item.goods_name}}</div>
						<div class="goods_label">共{{item.number}}件，小计￥{{item.price_total}}</div>
					</div>
				</div>
			</div>

		</div>
		<div class="bottom" slot='bottom'>
			<div class="bottom_left_f">
				<div class="bottom_left">
					<div class="money"><label for="">合计：</label><span>￥{{addrObj.price_total}}</span></div>
					<div style="text-align: right;">免运费</div>
				</div>
			</div>
			<div class="bottom_btn" @click="payMoney">立即支付</div>
		</div>
	</yd-layout>
</template>

<script>
	var pingpp = require('pingpp-js');
	export default {
		components: {

		},
		data() {
			return {

				address_id: '',
				addrObj: {},
				orderList: [],
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '确认订单';
			//获取订单详情
			this.getOrderDetail();
		},
		methods: {
			getOrderDetail() {
				this.$root.ajax({
					name: 'mall/order',
					params: {
						id: this.$route.query.id
					},
				}).then((d) => {
					d.data.order.price_total = this.$root.setMoneyZero(d.data.order,'price_total')
					for(let a =0;a<d.data.order.items.length;a++){
						d.data.order.items[a].price_total = this.$root.setMoneyZero(d.data.order.items[a],'price_total')
					}
					this.addrObj = d.data.order
					this.address_id = d.data.order.address_id
					
					this.orderList = d.data.order.items
				})
			},
			
			goStoreAddr() {
				this.$router.push({
					name: 'storeAddr',
					query:{
						id:this.address_id
					}
				})
			},
			async payMoney() {
				if(this.address_id) {
					if(this.$root.config.openId){
					
					}else{
						await this.$root.getOpenId()
					}
					
					this.$root.ajax({
						name: 'mall/order/pay',
						params: {
							order_id: this.$route.query.id,
							address_id: this.address_id,
							channel: 'wx_pub',
							success_url: this.$root.config.openId,
						},
					}).then((d) => {
						d.data.charge.channel = 'wx_pub';
						var vm = this;
						pingpp.createPayment(d.data.charge, (result, err) => {
							// object 需是 Charge/Order/Recharge 的 JSON 字符串
							// 可按需使用 alert 方法弹出 log
							//console.log(JSON.stringify(object));
							if(result == "success") {
								vm.$router.push({
									name: 'storeSuccess'
								})
								// 只有微信JSAPI (wx_pub)、微信小程序（wx_lite）、QQ 公众号 (qpay_pub)、支付宝小程序（alipay_lite）支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL
							} else if(result == "fail") {
								vm.$dialog.toast({
									mes: err.msg,
									timeout: 1500
								});
								// Ping++ 对象 object 不正确或者微信JSAPI/微信小程序/QQ公众号支付失败时会在此处返回
							} else if(result == "cancel") {
								vm.$dialog.toast({
									mes: '已取消支付！',
									timeout: 1500
								});
								// 微信JSAPI、微信小程序、QQ 公众号、支付宝小程序支付取消支付
							}
						});
					})

				} else {
					this.$dialog.toast({
						mes: '请先增加收货地址',
						timeout: 1500,
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	@import './storeOrder.scss';
</style>